@charset "utf-8";
/* CSS Document */

/* ----------------------------------
	Parameter für CSS
   ---------------------------------- */

:root {
   --sidebar-width: 190px;
   --header-height: 60px;
   --padding-rl: 20px;
   --padding-rl-mobile: 5px;
   /* Kontrastreiche Farben */
   --nav-bg-color: rgba(0, 0, 0, 0.2);
   --nav-link-color: #1a1a1a; /* Fast Schwarz für extremen Kontrast */
   --nav-accent-color: #007bff;

   /* Typografie-Optimierung */
   --nav-font-size: 2.5rem; /* Etwas größer für Klarheit */
   --nav-font-weight: 700; /* Fett gedruckt */
   --nav-letter-spacing: -1px; /* Moderner, kompakter Look */
}
/* ----------------------------------
	Allgemein
   ---------------------------------- */

* {
   box-sizing: border-box;
   padding: 0;
}

/* Einblendern Body um flimmern zu vermeiden */
body {
   margin: 0;
   padding: 0;
   overflow-x: hidden; /* Verhindert horizontales Scrollen */
   line-height: 1.2;
   /* animation: sanftEinblenden 1s ease-in; */
}
/* @keyframes sanftEinblenden {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
} */

/* 1. BASIS-SETUP */
html {
   margin: 0;
   padding: 0px 0px;
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 90%;
   font-weight: normal;
   background-color: #ebebfd;
   width: 100%;
   overflow-x: hidden; /* Verhindert seitliches Scrollen durch die Sidebar */
}

/* classe damit die Sidebar-Stellung immer erhalten bleibt */
.preload * {
   transition: none !important;
}

/* Mobile Anpassung */
@media screen and (max-width: 830px) {
   html {
      font-size: 100%;
   }
}

/* ----------------------------------
	Seiteninhalt Container
   ---------------------------------- */

/* Der Container für den gesamten Seiteninhalt */
.page-content {
   margin-top: var(--header-height);
   margin-bottom: 30px;
   /*	display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
	background-color: #EBEBFD; */
}

/* ----------------------------------
	Allgemeine Definitinen
   ---------------------------------- */

a {
   font-size: 1rem;
}

p {
   margin-bottom: 1rem;
   margin-top: 1rem;
   font-size: 1rem;
}

h1 {
   color: #0018f4;
   font-size: 1.5rem;
   font-weight: bold;
   font-style: normal;
   line-height: normal;
   margin-top: 1rem;
}

h2 {
   color: #0018f4;
   font-size: 1.4rem;
   font-weight: bold;
   font-style: normal;
   line-height: normal;
   margin-top: 1rem;
}

h3 {
   color: #000000;
   font-size: 1.3rem;
   font-weight: bold;
   font-style: normal;
   line-height: normal;
}

ul {
   padding-left: 35px;
}
ul li {
   list-style-image: url(../images/LogoMopedfahrerRechtsKlein.gif);
   font-size: 1rem;
}

td {
   font-size: 1rem;
   line-height: 1.5rem;
}
label {
   font-size: 1rem;
   line-height: 1.5rem;
}
option {
   font-size: 1rem;
   line-height: 1.5rem;
}

input {
   font-size: 100%;
   line-height: 1.5rem;
   /*	margin-right: 10px;
	margin-bottom: 10px;*/
}

/* Damit der Browser die Farbe nicht ändert durch das einfügen aus der Liste */
/* input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: inherit !important;
} */

textarea {
   font-size: 1rem;
}
select {
   font-size: 1rem;
}

/* ----------------------------------
	Definitinen Buttons
   ---------------------------------- */

button {
   background: linear-gradient(135deg, #f3f3f5, #e6e6e7);
   color: black;
   border: none;
   padding: 10px;
   border-radius: 12px;
   font-weight: bold;
   cursor: pointer;
   margin-right: 10px;
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: 10px;

   box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);

   transition:
      transform 0.2s ease,
      box-shadow 0.2 ease,
      filter 0ß.2s ease;
}
button:hover {
   transform: translate(-3px) scale(1.03);
   box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5);
   filter: brightness(1.1);
}
button:active {
   transform: translateY(1px) scale(0.98);
}

@media screen and (max-width: 830px) {
   #vorschauDesk {
      display: none;
   }
   button {
      font-size: 100%;
   }
}

/* ------------------- */

/* Schriftgröße im EditArea-Editor in Prozent definieren */
.editarea_popup #result,
.editarea_popup #content_highlight span,
.editarea_popup .area {
   font-size: 190% !important;
   line-height: 1.4 !important;
}

/* ----------------------------------
	Parallax-Effekt
   ---------------------------------- */

.text-block {
   /*	background: white; */
   padding: 20px 20px 20px 20px;
   /*	padding-right: calc(var(--sidebar-width) + 20px);*/
   /*	margin-bottom: 40px;*/
   /*	line-height: 1.1;*/
   position: relative;
   z-index: 2;
   /*	box-shadow: 0 0 50px rgba(0,0,0,0.2);*/
   min-height: 50vh;
   transition: padding-right 0.4s ease-in-out;
   overflow: hidden;
   /*	display:flex;
	flex-direction:column; */
}

.last-text-block {
   padding: 20px 20px 20px 20px;
   /*	padding-right: calc(var(--sidebar-width) + 20px);*/
   line-height: 1.1;
   position: relative;
   z-index: 2;
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
   min-height: 100vh;
   transition: padding-right 0.4s ease-in-out;
}

.text-block img {
   max-width: 100%;
   height: auto;
   /*	display:block;*/
}

.bild-wrapper {
   width: 100%;
   position: relative; /* Wichtig für das Label */
}

/* Zufallsbild einblenden */
#zufallsBild {
   width: 100%;
   height: auto;

   /* Exaktes Seitenverhältnis aus Ihren Maßen (512 / 124) */
   aspect-ratio: 512 / 124;

   /* Platzhalter-Farbe, während das JS/Bild lädt */
   background-color: #ebebfd;
   display: block;
   /* opacity: 1; */
   animation: Einblenden 1s ease-in;
   /* animation: blurIn 0.5s ease forwards; */
}
@keyframes Einblenden {
   from {
      opacity: 0.5;
   }
   to {
      opacity: 1;
   }
}

@keyframes blurIn {
   from {
      opacity: 0.7;
      filter: blur(5px);
   }
   to {
      opacity: 1;
      filter: blur(0);
   }
}

/* Mobile Anpassung */

@media screen and (max-width: 830px) {
   .text-block {
      padding: 20px 5px 20px 5px;
   }
}

.parallax-gap {
   height: 60vh;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-color: #ebebfd;
}

/*
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  height: 600px; 
  width: 100%;
}

.img-1 {background-image: url('images/Fischbachau004.JPG');}
.img-2 {background-image: url('images/Fischbachau002.JPG');}
.img-3 {background-image: url('images/Fischbachau003.JPG');} 
*/

/* ----------------------------------
	Das könnte Dich auch interessieren
   ---------------------------------- */

.menu-gallery {
   display: grid;
   /*	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));*/
   grid-template-columns: repeat(auto-fit, 180px);
   gap: 20px;
   padding: 20px 10px 20px 10px;
   /*	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-right: calc(var(--sidebar-width) + 20px);*/
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
}

body.sidebar-closed .menu-gallery {
   padding: 20px 10px 20px 10px !important;
}
/*
@media screen and (max-width: 830px) {
		.menu-gallery {
		padding-right: 20px;
	}
}*/

.menu-item {
   text-align: center;
   font-weight: bold;
}

.menu-item:hover {
   transform: scale(1.05);
   border-color: #eee;
   background-image:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--bg-url);
}
/*
.menuitem:hover {
	transform: scale(1.1);
	cursor: pointer;
} */

.menu-item img {
   width: 100%;
   height: auto;
   border-radius: 10px;
}

.anker-ziel {
   /* Setze hier die Höhe deines Headers + etwas Puffer */
   scroll-margin-top: 80px;
}

/* ----------------------------------
	Footer definiern
   ---------------------------------- */

#footer-container {
   position: fixed;
   margin: 0;
   bottom: 0px;
   width: 100%;
   left: 0;
   z-index: 500;
}

#footer {
   margin: auto;
   padding: 6px;
   height: auto;
   width: 100%;
   font-size: 10px;
   background: #e6e6e6;
   border-top: 1px;
   border-top-color: #4b4c4e;
   border-top-style: solid;
}

#footer p {
   margin-bottom: 0;
   margin-top: 0;
}

#copy-icon {
   margin-left: 10px;
}

input[type="checkbox"]:focus {
   outline: 2px solid #0056b3; /* Ersetzen Sie den Farbton nach Wunsch */
   outline-offset: 2px;
}
/* ------ spam - Bereich ------ */
.spamcheck {
   display: none !important;
}

/* ------ Tiny-classes ------ */
.HBbirtl {
   float: right;
   margin-left: 10px;
}
.HBbiltr {
   float: left;
   margin-right: 10px;
}

/* -------- bild am header --------*/
.bild-label {
   position: absolute;
   bottom: 8px;
   left: 8px;
   z-index: 10;

   padding: 2px 2px;
   color: #ffffff;
   background-color: rgba(19, 43, 248, 0.85);
   border-radius: 3px;
}

/* Desktop-Style: Bildschirme ab 768px Breite */
@media screen and (max-width: 768px) {
   .bild-label {
      bottom: 3px;
      left: 3px;
      font-size: 60%;
      border-radius: 2px;
   }
}

/* -------- paralaxBild --------*/
.paralaxBild-label {
   position: relative;
   z-index: 10;
   color: #fff;
   background-color: #132bf8;
   padding: 2px 2px;
   margin: 10px;
   display: inline-block;
}

/* Anzeige von success und fail auf einer Seite */

.zeige-message {
   padding: 3px;
   border-radius: 4px;
   font-weight: bold;
   text-align: center;
   min-height: 20px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease;
}

.zeige-message.fail-message {
   background: #f4dede;
   color: #de2b0c;
}

.zeige-message.success-message {
   background-color: #d4edda;
   color: #155724;
}

/* Overlay fixiert über den gesamten Bildschirm */
#loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: #ebebfd; /* Farbe an deine Website anpassen */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0.9;
   z-index: 9999; /* Stets im Vordergrund */
   transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
}

/* Note: Nach dem Laden wird diese Klasse per JS hinzugefügt */

#loading-overlay.hidden {
   opacity: 0;
   visibility: hidden;
}

.loader {
   --color-1: #fff;
   --color-2: #0015f4;
   --size: 1px;

   font-size: calc(48 * var(--size));
   display: inline-block;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: var(--color-1);
   box-sizing: border-box;
   text-shadow:
      0 0 calc(2 * var(--size)) var(--color-2),
      0 0 calc(1 * var(--size)) var(--color-2),
      0 0 calc(1 * var(--size)) var(--color-2);
   letter-spacing: calc(2 * var(--size));
   position: relative;
}

.loader::before,
.loader::after {
   white-space: nowrap;
   content: "Hypo-Biker";
}
.loader::after {
   position: absolute;
   left: 0;
   top: 0;
   color: var(--color-2);
   width: 100%;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
   animation: animloader 6s linear infinite;
}

@keyframes animloader {
   0% {
      width: 0%;
   }
   100% {
      width: 100%;
   }
}

/* Nachrichtenbox beim Mail-Service */
.boxMailservice {
   background-color: #f8f9fa;
   width: 100%;
   min-height: 50px;
   padding: 20px;
   border: 5px solid;
   border-radius: 20px;
   border-color: #ffffff;
   overflow-y: auto;
   overflow-wrap: break-word; /* Bricht lange Wörter am Ende der Zeile um */
   word-break: break-word; /* Unterstützung für ältere Browser */
}

@media screen and (max-width: 768px) {
   .boxMailservice {
      padding: 5px;
      bottom: 3px;
      left: 3px;
      font-size: 60%;
      border-radius: 2px;
   }
}

.boxMailservice1 {
   background-color: #f8f9fa;
   width: 100wh;
   min-height: 50px;
   padding: 20px;
   border: 5px solid;
   border-radius: 20px;
   border-color: #ffffff;
   overflow: auto;
}
@media screen and (max-width: 768px) {
   .boxMailservice1 {
      padding: 5px;
      bottom: 3px;
      left: 3px;
      font-size: 60%;
      border-radius: 2px;
   }
}